
<%--
  Created by IntelliJ IDEA.
  User: SKT
  Date: 2023/5/31
  Time: 19:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html><head>
    <title>$Title$</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.0-alpha1-dist/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #header {
            background-color: #008080;
            width: 100%;
            height: 50px;
        }

        #header .menu {
            display: flex; /* display: flex：弹性盒子，很适合多个元素按一行或者一列排开 */
            height: 100%;
            line-height: 50px;
            max-width: 1900px;
            padding: 0 20px;
        }


        #header .menu li {
            height: 100%;
        }

        #header li:hover {
            background: #4c9e9e;
            transition: 1s; /* 持续 0.5 秒 */
        }

        #header .menu li a {
            font: bolder normal 16px Source Sans Pro;
            color: #fff;
            padding: 14px 15px;
        }


        #header .menu .blog-subfunction {
            display: none;
            position: absolute;
            background: #008080;
            border-radius: 5px;
        }

        #header .menu .blog-subfunction li {
            padding: 0 0.5em;
            text-align: center;
        }

        #header .menu .blog:hover .blog-subfunction {
            display: block;
        }

        table, table tr th, table tr td {
            border: 1px solid #0094ff;
            border-radius: 2px;
        }

        table {
            margin: auto;
            width: 70%;
            text-align: center;
            height: 50%;

        }

        #r {
            border-radius: 0;
            margin: auto;
            display: block;
            width: 70%;

        }

        .panel {
            margin-top: 50px;
        }

        .jumbotron {
            text-align: center;
            width: 100%;
        }
#carouselExampleAutoplaying{
    margin: auto;
    width: 69%;
}
    </style>

</head>
<body class="" style="">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <video src="static/video/mmexport1666449130360.mp4" controls
                   @pause="videoPause"
                   @play="videoPlay"
            ></video>
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item active">
            <video src="static/video/mmexport1666449755739.mp4" controls
                   @pause="videoPause"
                   @play="videoPlay"
            ></video>
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="static/img/r3.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="static/img/r.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="static/img/r2.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<div id="newmyModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新建订单</h4>
            </div>
            <div class="modal-body">
                <form id="formAdd1" name="data1">
                    <label>ID:</label><input type="text" name="new_id" class="form-control" maxlength="64" required="" id="id">
                    <label>姓名:</label><input type="text" name="name" class="form-control" maxlength="64" required="" id="name">
                    <label>性别:</label><input type="text" name="gender" class="form-control" maxlength="64" required="" id="gender">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="close">关闭</button>
                <button id="newbtnsave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Vertically centered modal -->
<div id="myModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form id="formAdd2">
                    <label>ID:</label><input type="text" name="id1" class="form-control" maxlength="64" required="" id="new_id">
                    <label>姓名:</label><input type="text" name="name1" class="form-control" maxlength="64" required="" id="new_name">
                    <label>性别:</label><input type="text" name="gender1" class="form-control" maxlength="64" required="" id="new_gender">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="closeBtn">关闭</button>
                <button id="btnsave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading" style="color:red">警告!</h4>
                <p style="color: red">是否删除该信息?</p>
                <div class="btn-group" role="group" aria-label="Basic mixed styles example">
                    <button type="button" class="btn btn-danger" id="btnConfirmDelete">确 定</button>
                    <button type="button" class="btn btn-warning" id="cancelbtn">取 消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <a id="r" class="btn btn-primary btn-add">新建用户</a>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
<c:forEach var="i" items="${all}">
        <tr>
            <td>${i.id}</td>
            <td>${i.name}</td>
            <td>${i.gender}</td>
            <td>
                <input type="button" class="btn btn-primary btn-xs btn-detail" value="编辑" uid="${i.id}">
                <input class="btn btn-danger btn-xs btn-delete" type="button" value="删除" uid="${i.id}">
            </td>
        </tr>
        </c:forEach>
    </table>
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <h2>welcome back! </h2>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">let's go!</a></p>
    </div>
</div>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script src="static/plugins/bootstrap-5.3.0-alpha1-dist/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    let DELETE_ID;
    let edit_id;
    $(function () {
        add();
        save();
        edit();
        remove();
        editsave();
        getuid();
    })

    function add() {
        $(".btn-add").click(function () {
            $("#newmyModal").modal("show")
            console.log(111)
        })
    }

    function save() {
        $("#newbtnsave").click(function () {
            console.log(5555)
            $.ajax({
                url: "/select",
                type: "post",
                data: $("#formAdd1").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if(res.status){
                        console.log(999999)
                        alert("添加成功")
                        $('#newmyModal').modal('hide');
                        location.reload();
                        console.log(response)
                    }
                    else {
                        console.log("添加失败");
                        alert("添加失败")
                    }
                }


            })
        })
    }
    function edit() {
        $(".btn-detail").click(function () {
            let uid = $(this).attr("uid");
            edit_id = uid;
            console.log(edit_id)
            $.ajax({
                    url: "/edit",
                    type: "GET",
                    data: {
                        uid: uid
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $.each(res.info, function (name, value) {
                                $("#new_"+name).val(value)
                            })
                            $('#myModal').modal('show');
                        } else {
                            alert(res.error);
                            console.log(res.error)
                        }
                    }
                }
            )
        })
    }
    function editsave() {
        $("#btnsave").click(function () {
            $.ajax({
                url:"/edit/save",
                type:"post",
                data:$("#formAdd2").serialize(),
                dataType:"JSON",
                success:function (res) {
                    console.log(1213123)
                    console.log(res.status)
                    if (res.status){
                        alert("修改成功")
                        $('#myModal').modal('hide');
                        location.reload();
                    }else {
                        alert("添加失败")
                    }
                }
            })
        })
    }
    function getuid() {
        $(".btn-delete").click(function () {
            $("#deleteModal").modal("show");
            DELETE_ID = $(this).attr("uid");

        })
    }
    function remove() {
        $("#btnConfirmDelete").click(function () {
            $.ajax({
                url:"/delete",
                type:"GET",
                data:{
                    uid:DELETE_ID
                },
                dataType:"JSON",
                success: function (res) {
                    if (res.status) {
                        alert("删除成功")
                        location.reload();
                        // 隐藏删除数据
                        // 在页面上将当前一行的数据删除
                        $("tr[uid='" + DELETE_ID + "']").remove();
                        // 要删除的ID数据为空
                        DELETE_ID = 0;
                    } else {
                        // 删除失败
                        console.log(2)
                        alert(res.error)
                    }
                }
            })
        })
        // 点击确认删除，将全局变量中设置的那个要删除的ID发送给后台

    }
</script>



</body></html>
